doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Freelancer - Start Bootstrap Theme

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        // Font Awesome icons (free version)
        script(src='https://use.fontawesome.com/releases/v6.3.0/js/all.js', crossorigin='anonymous')

        // Google fonts
        link(href='https://fonts.googleapis.com/css?family=Montserrat:400,700', rel='stylesheet', type='text/css')
        link(href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic', rel='stylesheet', type='text/css')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body#page-top

        // Navigation
        nav#mainNav.navbar.navbar-expand-lg.bg-secondary.text-uppercase.fixed-top
            .container
                a.navbar-brand(href='#page-top') Start Bootstrap
                button.navbar-toggler.text-uppercase.font-weight-bold.bg-primary.text-white.rounded(type='button', data-bs-toggle='collapse', data-bs-target='#navbarResponsive', aria-controls='navbarResponsive', aria-expanded='false', aria-label='Toggle navigation')
                    | Menu 
                    i.fas.fa-bars
                #navbarResponsive.collapse.navbar-collapse
                    ul.navbar-nav.ms-auto
                        li.nav-item.mx-0.mx-lg-1
                            a.nav-link.py-3.px-0.px-lg-3.rounded(href='#portfolio') Portfolio
                        li.nav-item.mx-0.mx-lg-1
                            a.nav-link.py-3.px-0.px-lg-3.rounded(href='#about') About
                        li.nav-item.mx-0.mx-lg-1
                            a.nav-link.py-3.px-0.px-lg-3.rounded(href='#contact') Contact

        // Masthead
        header.masthead.bg-primary.text-white.text-center
            .container.d-flex.align-items-center.flex-column
                // Masthead Avatar Image
                img.masthead-avatar.mb-5(src='assets/img/avataaars.svg', alt='...')
                // Masthead Heading
                h1.masthead-heading.text-uppercase.mb-0 Start Bootstrap
                // Icon Divider
                .divider-custom.divider-light
                    .divider-custom-line
                    .divider-custom-icon
                        i.fas.fa-star
                    .divider-custom-line
                // Masthead Subheading
                p.masthead-subheading.font-weight-light.mb-0 Graphic Artist - Web Designer - Illustrator

        // Portfolio Section
        section#portfolio.page-section.portfolio
            .container
                // Portfolio Section Heading
                h2.page-section-heading.text-center.text-uppercase.text-secondary.mb-0 Portfolio
                // Icon Divider
                .divider-custom
                    .divider-custom-line
                    .divider-custom-icon
                        i.fas.fa-star
                    .divider-custom-line
                // Portfolio Grid Items
                .row.justify-content-center
                    // Portfolio Item 1
                    .col-md-6.col-lg-4.mb-5
                        .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal1')
                            .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
                                .portfolio-item-caption-content.text-center.text-white
                                    i.fas.fa-plus.fa-3x
                            img.img-fluid(src='assets/img/portfolio/cabin.png', alt='...')
                    // Portfolio Item 2
                    .col-md-6.col-lg-4.mb-5
                        .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal2')
                            .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
                                .portfolio-item-caption-content.text-center.text-white
                                    i.fas.fa-plus.fa-3x
                            img.img-fluid(src='assets/img/portfolio/cake.png', alt='...')
                    // Portfolio Item 3
                    .col-md-6.col-lg-4.mb-5
                        .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal3')
                            .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
                                .portfolio-item-caption-content.text-center.text-white
                                    i.fas.fa-plus.fa-3x
                            img.img-fluid(src='assets/img/portfolio/circus.png', alt='...')
                    // Portfolio Item 4
                    .col-md-6.col-lg-4.mb-5.mb-lg-0
                        .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal4')
                            .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
                                .portfolio-item-caption-content.text-center.text-white
                                    i.fas.fa-plus.fa-3x
                            img.img-fluid(src='assets/img/portfolio/game.png', alt='...')
                    // Portfolio Item 5
                    .col-md-6.col-lg-4.mb-5.mb-md-0
                        .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal5')
                            .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
                                .portfolio-item-caption-content.text-center.text-white
                                    i.fas.fa-plus.fa-3x
                            img.img-fluid(src='assets/img/portfolio/safe.png', alt='...')
                    // Portfolio Item 6
                    .col-md-6.col-lg-4
                        .portfolio-item.mx-auto(data-bs-toggle='modal', data-bs-target='#portfolioModal6')
                            .portfolio-item-caption.d-flex.align-items-center.justify-content-center.h-100.w-100
                                .portfolio-item-caption-content.text-center.text-white
                                    i.fas.fa-plus.fa-3x
                            img.img-fluid(src='assets/img/portfolio/submarine.png', alt='...')

        // About Section
        section#about.page-section.bg-primary.text-white.mb-0
            .container
                // About Section Heading
                h2.page-section-heading.text-center.text-uppercase.text-white About
                // Icon Divider
                .divider-custom.divider-light
                    .divider-custom-line
                    .divider-custom-icon
                        i.fas.fa-star
                    .divider-custom-line
                // About Section Content
                .row
                    .col-lg-4.ms-auto
                        p.lead
                            | Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.
                    .col-lg-4.me-auto
                        p.lead
                            | You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!
                // About Section Button
                .text-center.mt-4
                    a.btn.btn-xl.btn-outline-light(href='https://startbootstrap.com/theme/freelancer/')
                        i.fas.fa-download.me-2
                        | Free Download!

        // Contact Section
        section#contact.page-section
            .container
                // Contact Section Heading
                h2.page-section-heading.text-center.text-uppercase.text-secondary.mb-0 Contact Me
                // Icon Divider
                .divider-custom
                    .divider-custom-line
                    .divider-custom-icon
                        i.fas.fa-star
                    .divider-custom-line
                // Contact Section Form
                .row.justify-content-center
                    .col-lg-8.col-xl-7

                        // * * * * * * * * * * * * * * *
                        // * * SB Forms Contact Form * *
                        // * * * * * * * * * * * * * * *

                        // This form is pre-integrated with SB Forms.
                        // To make this form functional, sign up at
                        // https://startbootstrap.com/solution/contact-forms
                        // to get an API token!

                        form#contactForm(data-sb-form-api-token='API_TOKEN')

                            // Name input
                            .form-floating.mb-3
                                input#name.form-control(
                                    type='text',
                                    placeholder='Enter your name...',
                                    data-sb-validations='required'
                                )
                                label(for='name') Full name
                                .invalid-feedback(data-sb-feedback='name:required')
                                    | A name is required.

                            // Email address input
                            .form-floating.mb-3
                                input#email.form-control(
                                    type='email',
                                    placeholder='name@example.com',
                                    data-sb-validations='required,email'
                                )
                                label(for='email') Email address
                                .invalid-feedback(data-sb-feedback='email:required')
                                    | An email is required.
                                .invalid-feedback(data-sb-feedback='email:email')
                                    | Email is not valid.

                            // Phone number input
                            .form-floating.mb-3
                                input#phone.form-control(
                                    type='tel',
                                    placeholder='(123) 456-7890',
                                    data-sb-validations='required'
                                )
                                label(for='phone') Phone number
                                .invalid-feedback(data-sb-feedback='phone:required')
                                    | A phone number is required.

                            // Message input
                            .form-floating.mb-3
                                textarea#message.form-control(
                                    type='text',
                                    placeholder='Enter your message here...',
                                    style='height: 10rem;',
                                    data-sb-validations='required'
                                )
                                label(for='message') Message
                                .invalid-feedback(data-sb-feedback='message:required')
                                    | A message is required.

                            // Submit success message
                            //
                            // This is what your users will see when the form
                            // has successfully submitted

                            #submitSuccessMessage.d-none
                                .text-center.mb-3
                                    .fw-bolder Form submission successful!
                                    | To activate this form, sign up at
                                    br
                                    a(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms

                            // Submit error message
                            //
                            // This is what your users will see when there is
                            // an error submitting the form

                            #submitErrorMessage.d-none
                                .text-center.text-danger.mb-3 Error sending message!

                            // Submit Button
                            button#submitButton.btn.btn-primary.btn-xl.disabled(type='submit') Send

        // Footer
        footer.footer.text-center
            .container
                .row
                    // Footer Location
                    .col-lg-4.mb-5.mb-lg-0
                        h4.text-uppercase.mb-4 Location
                        p.lead.mb-0
                            | 2215 John Daniel Drive
                            br
                            | Clark, MO 65243
                    // Footer Social Icons
                    .col-lg-4.mb-5.mb-lg-0
                        h4.text-uppercase.mb-4 Around the Web
                        a.btn.btn-outline-light.btn-social.mx-1(href='#!')
                            i.fab.fa-fw.fa-facebook-f
                        a.btn.btn-outline-light.btn-social.mx-1(href='#!')
                            i.fab.fa-fw.fa-twitter
                        a.btn.btn-outline-light.btn-social.mx-1(href='#!')
                            i.fab.fa-fw.fa-linkedin-in
                        a.btn.btn-outline-light.btn-social.mx-1(href='#!')
                            i.fab.fa-fw.fa-dribbble
                    // Footer About Text
                    .col-lg-4
                        h4.text-uppercase.mb-4 About Freelancer
                        p.lead.mb-0
                            | Freelance is a free to use, MIT licensed Bootstrap theme created by 
                            a(href='http://startbootstrap.com') Start Bootstrap
                            | .

        // Copyright Section
        div.copyright.py-4.text-center.text-white
            .container
                small Copyright &copy; Your Website 2023

        // Portfolio Modals
        include includes/portfolio-modal-1.pug
        include includes/portfolio-modal-2.pug
        include includes/portfolio-modal-3.pug
        include includes/portfolio-modal-4.pug
        include includes/portfolio-modal-5.pug
        include includes/portfolio-modal-6.pug

        // Bootstrap core JS
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')

        // Core theme JS
        script(src='js/scripts.js')

        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * *                               SB Forms JS                               * *
        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')